<template>
    <div>
        <el-form label-position="top" :model="signInForm" ref="signInForm" :rules="rules">
            <el-form-item label="Email" prop="email">
                <el-input v-model="signInForm.email"></el-input>
            </el-form-item>
            <el-form-item label="Password" prop="password">
                <el-input v-model="signInForm.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="Verification Code" prop="verification_code">
                <el-input v-model="signInForm.verification_code" style="width: 415px">
                </el-input>
                <img :src="`${validcodeUrl}&r=${time}`" class="verification" @click="this.reloadValidCode"/>
            </el-form-item>

        </el-form>
        <div class="ep-form-bottom">
            <div class="ep-form-btn-panel">
                <el-checkbox v-model="remember">Remember me</el-checkbox>
                <el-button type="primary" style="margin-left: auto" @click="submit('signInForm')">Sign In</el-button>
            </div>
        </div>
    </div>


</template>

<script>

    import {post} from '../utils/request'

    export default {
        components: {},
        name: "ep-sign-in-form",
        props: {
            actionUrl: {
                type: String
            },
            validcodeUrl: {
                type: String
            },
            ctx: {
                type: String,
                default: ""
            },
            forward: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                time: "",
                remember: false,
                signInForm: {
                    password: "",
                    email: "",
                    verification_code: "",
                },
                rules: {
                    email: [
                        {
                            required: true,
                            message: "The email address in the Email field is invalid.",
                            trigger: 'blur'
                        },
                        {
                            type: 'email',
                            message: 'The Email field is not an email address.',
                            trigger: 'blur'
                        },
                    ],
                    password: [
                        {
                            required: true,
                            message: "The Password field is mandatory.",
                            trigger: 'blur'
                        }
                    ],
                    verification_code: [
                        {
                            required: true,
                            message: "The Verification Code field is mandatory.",
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods: {
            reloadValidCode() {
                this.time = new Date().getTime()
            },
            submit(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        let loadingInstance = this.$loading({
                            fullscreen: true,
                            text: 'Please Wait for Response.'
                        })
                        let data = {
                            username: this.signInForm.email,
                            password: this.signInForm.password,
                            validcode: this.signInForm.verification_code
                        };
                        if (this.remember) {
                            data.remember = 1;
                        }
                        post(this.actionUrl, data).then((res) => {
                            loadingInstance.close()
                            console.log(res);
                            if (res.result === 0) {
                                this.$message.error(res.message);
                                this.reloadValidCode();
                            } else {
                                this.$message.success(res.message);
                                setTimeout(() => {
                                    if (res.data && res.data.check_type != undefined && res.data.check_type == "register") {
                                        //  跳转到注册页面
                                        location.href = `${this.ctx}/register.html`;
                                    } else {

                                        if (this.forward == "") {
                                            location.href = `${this.ctx}/index.html`;
                                        }
                                        else if (this.forward == "checkout.html") {
                                            location.href = `${this.ctx}/cart.html`;
                                        }
                                        else {
                                            location.href = this.forward;
                                        }
                                    }
                                }, 500)

                            }
                        }).catch((error) => {
                            console.log(error)
                        })
                    } else {

                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-input-group__append, .el-input-group__prepend {
        padding: 0;
    }

    .ep-form-bottom {
        padding-top: 40px;
        padding-bottom: 40px;
        .ep-form-btn-panel {
            padding: 8px 10px;
            background: #f0f0f0;
            overflow: visible;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }

    .verification {
        width: 140px;
        height: 36px;
        margin-left: 18px;
        display: inline-block;
        position: relative;
        vertical-align: middle;
    }
</style>
